<template>
  <div class="car_in_out_box">
    <h1>车辆进出场登记</h1>

    <!-- 进入进出按钮 -->
    <div class="carInOut_btn">
      <el-button type="info" class="ParkSet_btn" @click="carInVisible = true">进场登记</el-button>
      <el-button type="info" class="ParkSet_btn" @click="carOutVisible = true">出场登记</el-button>
    </div>

    <!-- 进场登记 -->
    <el-dialog v-model="carInVisible" title="进场登记">
      <el-form :model="carData">
        <el-form-item label="车牌号" :label-width="formLabelWidth">
          <el-input v-model="carData.carnumber" autocomplete="off" />
        </el-form-item>
        <el-form-item label="停车场" :label-width="formLabelWidth">
          <el-select v-model="carData.parkid" filterable placeholder="请选择停车场" style="width: 100%;">
            <el-option v-for="(item) in options" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="carInVisible = false">取消</el-button>
          <el-button type="info" @click="carInFn">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 出场登记 -->
    <el-dialog v-model="carOutVisible" title="出场登记">
      <el-form :model="carData">
        <el-form-item label="车牌号" :label-width="formLabelWidth">
          <el-input v-model="carData.carnumber" autocomplete="off" />
        </el-form-item>
        <el-form-item label="停车场" :label-width="formLabelWidth">
          <el-select v-model="carData.parkid" filterable placeholder="请选择停车场" style="width: 100%;">
            <el-option v-for="(item) in options" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="carOutVisible = false">取消</el-button>
          <el-button type="info" @click="carOutFn">
            确认
          </el-button>
        </span>
      </template>

    </el-dialog>
    <div v-if="showFlag">
      <!-- 会员 -->
      <MemberFees v-if="vipFlag"></MemberFees>
      <!-- 非会员 -->
      <NonMemberFees v-else :parkid="nonMember.id" :carnumber="nonMember.carnumber" ></NonMemberFees>
    </div>

  </div>
</template>

<script setup lang="ts">
// import { nextTick } from 'vue'
import { ref, reactive } from "vue"
import { useStore } from 'vuex'
import { carInAPI, carOutAPI } from "@/api/charge";
import { ElMessage,ElNotification  } from 'element-plus'
import NonMemberFees from "@/components/NonMemberFees.vue"
import MemberFees from "@/components/MemberFees.vue"

const store = useStore()
const formLabelWidth = "80px"
let carInVisible = ref<boolean>(false);
let carOutVisible = ref<boolean>(false);
let options = reactive([]);
let carData = reactive({
  carnumber: '',
  parkid: undefined,
});
let vipFlag = ref<boolean>(false);
let showFlag = ref<boolean>(false);
let nonMember=reactive({
  carnumber:'',
  id:undefined,
})
//加载停车场数据
store.commit('GET_PARKSET')
options = store.state.parkSet

/* console.log(store.state.loginState);
console.log(store.state);
setTimeout(() => {
  console.log(store.state.parkSet);
}, 1000)
nextTick(() => {
  console.log("1111",store.state.parkSet);
}) */

//进场登记
function carInFn() {
  console.log('carData', carData);
  carInAPI({ ...carData }).then((res: any) => {
    // console.log(res);
    ElMessage({
      showClose: true,
      message: res.msg,
    })
    if (res.code == 2000) {
      nonMember.carnumber=carData.carnumber;
      nonMember.id=carData.parkid;
      carInVisible.value = false;
      carData.carnumber = '';
      carData.parkid = undefined;
      console.log("nonMember",nonMember);
      
    }
  })
}

//出场登记
function carOutFn() {
  // console.log('carData', carData);
  carOutAPI(carData).then((res: any) => {
    console.log(res);
    ElMessage({
      showClose: true,
      message: res.msg,
    })
    if (res.code == 2000) {
      showFlag.value = true;

      carOutVisible.value = false;
      carData.carnumber = '';
      carData.parkid = undefined;
      if (res.data.isvip == '否') {
        vipFlag.value = false;
      } else {
        vipFlag.value = true;
      }
      // console.log(vipFlag);

    }
  })
}




</script>

<style lang="less" scoped>
.car_in_out_box {
  width: 100%;
  height: 100%;

  .carInOut_btn {
    margin-top: 15px;
    margin-bottom: 15px;
  }
}
</style>